*{margin:0; padding:0;}

//主题颜色
@mainColor: #E40075;

#app{
    padding-bottom:55px;
}

/**头部搜索**/
.header-search-div{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    margin-top:8px;
    .form-search-div{
        width: 80%;
        height:100%;
        border-radius: 15px;
        display: flex;
        align-items: center;
        background:  #F0F0F0;
        padding: 0 10px;
        box-sizing: border-box;
        .form-search{
            width:100%;
            height: 100%;
            position: relative;
            /**搜索icon**/
            .search-icon{
                color: #909090;
                position: absolute;
                top:8px;
                left:0px;
                font-size:22px;
            }
            input.search-inp{
                position: absolute;
                left:20px;
                top:0px;
                width:90%;
                height: 100%;
                padding:0 10px;
                box-sizing: border-box;
                line-height:25px;
                border:none;
                font-size:14px;
                background:transparent;
            }
        }
    }
    
    .cart-icon-div{
        width: 10%;
        .iconfont{
            display: inline-block;
            font-size:24px;
            color: #909090;
        }
    }
    
}


/**首页分类**/
.header-sort-div{
    .van-tab--active{
        color: @mainColor;
    }
    /**去掉横线**/
    .van-hairline--top-bottom::after {
        border: 0;
    }
    /**分类的内容**/
    .header-sort-content{
        .content{
            display: none;
        }
        .active{
           display: block; 
        }
    }
    /**首页**/
    /*轮播图*/
    .swiper{
        width:100%;
        height: 204px;
        margin-top:10px;
        img{
            width:100%;
            height: 100%;
        }
        /**指示器**/
        .van-swipe__indicators{
            right: 25px;
            left: initial;
            transform: initial;
            .van-swipe__indicator{
                background: #666;
            }
            .van-swipe__indicator--active{
                background: @mainColor;
            }
        }
    }
    /**列表内容**/
    .items-list{
        color: #1A1A1A;
        padding:10px;
        .item{
            margin-top:30px;
            p.title{
                margin-bottom:10px;
                img{
                    height:20px;
                    vertical-align: middle;
                }
                span.text{
                    margin-left:10px;
                    font-size:14px;
                }
            }
            /**本月新品的轮播**/
            .swiper-div{
                padding:0 20px;
                .swiper{
                    height: 150px;
                    border-radius:10px;
                    overflow: hidden;
                    box-sizing: border-box;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
            /**热卖单品的图片组**/
            .hot-lists-div{
                ul{
                    overflow: hidden;
                    li{
                        width:30%;
                        height: 160px;
                        margin-left:2.5%;
                        float:left;
                        border-radius:8px;
                        border:1px solid #eeeeee;
                        box-sizing: border-box;
                        overflow: hidden;
                        img{
                            width:100%;
                            height:100px;
                        }
                        p{
                            font-size:12px;
                            color:  #1A1A1A;
                            padding:0 5px;
                        }
                        p.price{
                            span.money{
                                color:@mainColor;
                            }
                            span.line_through{
                                text-decoration: line-through;
                                color:#999;
                                font-size:10px;
                            }
                        }
                    }
                }
            }
            /**学习中心**/
            .study-div{
                height:150px;
                border-radius:8px;
                overflow: hidden;
                img{
                    height:100%;
                    width:100%;
                }
            }
        }
    }

    /**美容护肤、珠宝首饰、美容仪器**/
    .content{
        ul.content-ul{
            padding:0 10px;
            li{
                width:100%;
                padding:20px 0 20px;
                box-sizing: border-box;
                img{
                    width:100%;
                    height:160px;
                    border-radius:8px;
                }
                /**商品名称**/
                p.goods_name{
                    color: #1A1A1A;
                }
                /**商品描述**/
                p.goods_desc{
                    font-size:12px;
                    color: #666;
                    span.desc2{
                        color: @mainColor;
                    }
                }
                /**已买人数**/
                .buyed{
                    text-align:right;
                    color:#999;
                    font-size:11px;
                    margin-right:6px;
                }
                /**商品价格**/
                .goods_price{
                    span.price{
                        font-size:17px;
                        color:@mainColor;
                    }
                    span.origin_price{
                        color: #999;
                        font-size: 12px;
                        margin-left:25px;
                        span{
                            text-decoration: line-through;
                        }
                    }
                    span.buy_btn{
                        float: right;
                        background:@mainColor;
                        color:#fff;
                        border-radius: 5px;
                        font-size:14px;
                        padding:3px 6px;
                    }
                }
            }
            li+li{
                border-top:1px solid #DFDFDF;
            }
        }
    }
}



/**底部导航**/
.tabList{
    width:100%;
    height: 50px;
    position: fixed;
    background:#fff;
    bottom: 0; 
    left:0;
    display: flex;
    text-align: center;
    border-top:2px solid #B9B8B8;
    .list{
        width:25%;
        height:100%;
        color:  #1A1A1A ;
        i.iconfont{
            font-size: 26px;
        }
        p{
            font-size:10px;
        }
    }
    .list.active{
        color: @mainColor;
    }
}
